<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<BackButton />
			<p>钱包充值</p>
		</header>

		<!-- 充值金额输入 -->
		<div class="recharge-form">
			<div class="form-group">
				<label>充值金额</label>
				<div class="input-wrapper">
					<span class="currency">¥</span>
					<input 
						type="number" 
						v-model="amount" 
						placeholder="请输入充值金额"
						@input="validateAmount"
						min="0"
						step="0.01"
					/>
				</div>
				<p class="hint" v-if="rechargeGift > 0">充值满{{ rechargeLevel }}元，赠送{{ rechargeGift }}元</p>
			</div>

			<!-- 快捷金额选择 -->
			<div class="quick-amounts">
				<h3 class="section-title">快捷金额</h3>
				<div class="amount-buttons">
					<button 
						v-for="quickAmount in quickAmounts" 
						:key="quickAmount"
						class="amount-btn"
						:class="{ active: amount == quickAmount }"
						@click="selectAmount(quickAmount)"
					>
						¥{{ quickAmount }}
					</button>
				</div>
			</div>

			<!-- 充值说明 -->
			<div class="recharge-info">
				<h3 class="section-title">充值说明</h3>
				<ul>
					<li>充值金额最低1元</li>
					<li v-if="rechargeGift > 0">充值满{{ rechargeLevel }}元，系统将自动赠送{{ rechargeGift }}元</li>
					<li>充值成功后，金额将立即到账</li>
				</ul>
			</div>

			<!-- 提交按钮 -->
			<div class="submit-section">
			<button 
				type="button"
				class="submit-btn" 
				@click.stop="submitRecharge" 
				:disabled="!isValidAmount || loading"
				:style="{ cursor: (!isValidAmount || loading) ? 'not-allowed' : 'pointer' }"
			>
				<span v-if="loading">充值中...</span>
				<span v-else>确认充值 ¥{{ amount || '0.00' }}</span>
			</button>
				<!-- 调试信息 -->
				<p style="font-size: 12px; color: #666; margin-top: 10px;">
					按钮状态: {{ isValidAmount ? '可用' : '禁用' }} | 金额: {{ amount || '未输入' }}
				</p>
			</div>
		</div>

		<!-- 底部菜单部分 -->
		<AppFooter></AppFooter>
	</div>
</template>

<script>
	import AppFooter from '../components/AppFooter.vue';
	import BackButton from '../components/BackButton.vue';
	export default {
		name: 'WalletRecharge',
		data() {
			return {
				amount: '',
				loading: false,
				quickAmounts: [50, 100, 200, 500, 1000],
				rechargeLevel: 1000,
				rechargeGift: 100,
				user: null
			}
		},
		computed: {
			isValidAmount() {
				const num = parseFloat(this.amount);
				return !isNaN(num) && num >= 1;
			}
		},
		created() {
			let user = this.$getSessionStorage('user');
			if (user == null) {
				this.$router.push('/login');
				return;
			}
			this.user = user;
			this.loadRechargeRules();
		},
		methods: {
			loadRechargeRules() {
				// 从后端获取充值规则
				this.$axios.post('WalletRuleController/getRechargeRule').then(response => {
					if (response.data && (response.data.code === 200 || response.data.code === '200') && response.data.result) {
						const rule = response.data.result;
						this.rechargeLevel = parseFloat(rule.rechargeLevel || 1000);
						this.rechargeGift = parseFloat(rule.rechargeGift || 100);
					}
				}).catch(error => {
					console.error('获取充值规则失败:', error);
				});
			},
			selectAmount(amount) {
				console.log('选择快捷金额:', amount);
				this.amount = amount.toString();
				this.validateAmount();
				console.log('设置金额后，isValidAmount:', this.isValidAmount);
			},
			validateAmount() {
				if (this.amount && parseFloat(this.amount) < 1) {
					this.$toast?.error('充值金额不能少于1元');
				}
			},
			submitRecharge(event) {
				// 阻止默认行为和事件冒泡
				if (event) {
					event.preventDefault();
					event.stopPropagation();
				}
				
				console.log('=== submitRecharge 被调用 ===');
				console.log('isValidAmount:', this.isValidAmount);
				console.log('amount:', this.amount);
				console.log('loading:', this.loading);
				console.log('user:', this.user);
				
				// 如果按钮被禁用，直接返回
				if (!this.isValidAmount || this.loading) {
					console.warn('按钮被禁用，无法提交');
					if (!this.isValidAmount) {
						const msg = '请输入有效的充值金额（至少1元）';
						if (this.$toast) {
							this.$toast.error(msg);
						} else {
							alert(msg);
						}
					}
					return false;
				}

				const rechargeAmount = parseFloat(this.amount);
				console.log('解析后的充值金额:', rechargeAmount);
				
				if (isNaN(rechargeAmount) || rechargeAmount < 1) {
					const msg = '充值金额不能少于1元';
					if (this.$toast) {
						this.$toast.error(msg);
					} else {
						alert(msg);
					}
					return false;
				}

				if (!this.user || !this.user.userId) {
					const msg = '用户信息错误，请重新登录';
					if (this.$toast) {
						this.$toast.error(msg);
					} else {
						alert(msg);
					}
					this.$router.push('/login');
					return false;
				}

				console.log('准备跳转到支付页面，金额:', rechargeAmount);
				
				// 跳转到支付页面
				this.$router.push({
					path: '/rechargePayment',
					query: {
						amount: rechargeAmount.toFixed(2)
					}
				}).then(() => {
					console.log('路由跳转成功');
				}).catch(err => {
					console.error('路由跳转失败:', err);
					const msg = '跳转失败: ' + (err.message || '未知错误');
					if (this.$toast) {
						this.$toast.error(msg);
					} else {
						alert(msg);
					}
				});
				
				return false;
			}
		},
		components: {
			AppFooter,
			BackButton
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部应用栏 */
	header {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
		gap: 16px;
	}

	header p {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	/****************** 充值表单 ******************/
	.recharge-form {
		margin-top: 0;
		padding: 4vw;
		padding-top: 20px;
		padding-bottom: 120px;
	}

	.form-group {
		background-color: #fff;
		border-radius: 12px;
		padding: 4vw;
		margin-bottom: 4vw;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}

	.form-group label {
		display: block;
		font-size: 3.5vw;
		color: #666;
		margin-bottom: 3vw;
	}

	.input-wrapper {
		display: flex;
		align-items: center;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		padding: 3vw;
		transition: border-color 0.3s;
	}

	.input-wrapper:focus-within {
		border-color: #0097FF;
	}

	.currency {
		font-size: 5vw;
		color: #333;
		margin-right: 2vw;
		font-weight: 500;
	}

	.input-wrapper input {
		flex: 1;
		border: none;
		outline: none;
		font-size: 6vw;
		color: #333;
	}

	.hint {
		margin-top: 2vw;
		font-size: 3vw;
		color: #ff9800;
	}

	/****************** 快捷金额 ******************/
	.quick-amounts {
		background-color: #fff;
		border-radius: 12px;
		padding: 4vw;
		margin-bottom: 4vw;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}

	.section-title {
		font-size: 4vw;
		color: #666;
		margin: 0 0 3vw 0;
		font-weight: 500;
	}

	.amount-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 2vw;
	}

	.amount-btn {
		flex: 1;
		min-width: calc(33.33% - 2vw);
		padding: 3vw;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		background-color: #fff;
		color: #333;
		font-size: 4vw;
		cursor: pointer;
		transition: all 0.3s;
	}

	.amount-btn.active {
		border-color: #0097FF;
		background-color: #0097FF;
		color: #fff;
	}

	.amount-btn:active {
		transform: scale(0.95);
	}

	/****************** 充值说明 ******************/
	.recharge-info {
		background-color: #fff;
		border-radius: 12px;
		padding: 4vw;
		margin-bottom: 4vw;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	}

	.recharge-info ul {
		margin: 0;
		padding-left: 5vw;
	}

	.recharge-info li {
		font-size: 3.5vw;
		color: #666;
		line-height: 1.8;
		margin-bottom: 1.5vw;
	}

	/****************** 提交按钮 ******************/
	.submit-section {
		padding: 4vw;
	}

	.submit-btn {
		width: 100%;
		padding: 4vw;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		border: none;
		border-radius: 12px;
		font-size: 4.5vw;
		cursor: pointer;
		transition: all 0.3s;
		box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
	}

	.submit-btn:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.submit-btn:active:not(:disabled) {
		transform: scale(0.98);
	}
</style>

